<template>
    <div style="padding-bottom: 100px;">
        <div class="title">
            <div class="title_all title_left">
                <div class="title_content">
                    <div class="first_title">本月签单总额（元）</div>
                    <div class="second_title">较上月<div>+0.05%</div></div>
                    <div class="third_title">
                        <div class="text">1,000W</div>
                        <div>
                            <img src="~images/钱包.png" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="title_all title_center">
                <div class="title_content">
                    <div class="first_title">年度签单总额（元）</div>
                    <div class="second_title" :class="showType == 1 ? '' : 'second_title_disable'">
                        {{ showType == 1 ? '较去年' : '' }}
                        <div :style="showType == 1 ? '' : 'display: none'">
                            {{ showType == 1 ? '+100%' : '' }}
                        </div>
                    </div>
                    <div class="third_title">
                        <div class="text">6,666W</div>
                        <div>
                            <img src="~images/钱包.png" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="title_all title_right">
                <div class="title_content">
                    <div class="first_title">年度目标完成率</div>
                    <div class="second_title" :class="1 == 2 ? '' : 'second_title_disable'"></div>
                    <div class="third_title">
                        <div class="text">100%</div>
                        <div>
                            <img src="~images/指标.png" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="center">
            <div class="center_left">
                <div class="center_left_top">
                    <div>本月毛利（元）</div>
                </div>
                <div class="center_left_down">
                    <div class="center_left_down_left">
                        <div class="center_left_down_text">
                            <div class="center_left_down_text_title"><div>含盲盒</div></div>
                            <div class="center_left_down_text_content">999</div>
                        </div>
                    </div>
                    <div class="center_left_down_right">
                        <div class="center_left_down_text">
                            <div class="center_left_down_text_title"><div>不含盲盒</div></div>
                            <div class="center_left_down_text_content">999</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center_right">
                <div class="center_right_top">
                    <div class="center_right_top_left">
                        <div>本月卖货变现</div>
                    </div>
                    <div class="center_right_top_right">
                        <div class="center_right_top_right_left">
                            <div class="center_right_top_right_price">7,000</div>
                        </div>
                        <div class="center_right_top_right_right">
                            <div class="center_right_top_right_right_1">(元)</div>
                            <div class="center_right_top_right_right_2">
                                <div class="center_right_top_right_right_2_top">较上月</div>
                                <div class="center_right_top_right_right_2_bottom" :class="showType == 1 ? 'center_right_top_right_right_2_bottom_add' : 'center_right_top_right_right_2_bottom_del'">+0.05%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="center_right_down">
                    <div class="center_right_top_left">
                        <div>本月盲盒变现</div>
                    </div>
                    <div class="center_right_top_right">
                        <div class="center_right_top_right_left">
                            <div class="center_right_top_right_price">7,000</div>
                        </div>
                        <div class="center_right_top_right_right">
                            <div class="center_right_top_right_right_1">(元)</div>
                            <div class="center_right_top_right_right_2">
                                <div class="center_right_top_right_right_2_top">较上月</div>
                                <div class="center_right_top_right_right_2_bottom" :class="showType == 2 ? 'center_right_top_right_right_2_bottom_add' : 'center_right_top_right_right_2_bottom_del'">+0.05%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <el-table
                :data="showTableList"
                stripe
                height='700'
                :row-style="{height: '0'}"
                :cell-style="{padding: '3px'}"
                style="width: 100%">
                <el-table-column
                prop="projectName"
                align='center'
                show-overflow-tooltip
                label="项目">
                </el-table-column>
                <el-table-column
                prop="totalPrice"
                align='center'
                show-overflow-tooltip
                label="货值">
                    <template slot-scope="scope">
                        <div class="total_price">
                            {{scope.row.totalPrice}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                prop="time"
                align='center'
                width="200"
                show-overflow-tooltip
                label="时间">
                    <template slot-scope="scope">
                        <div class="table_time">
                            {{scope.row.time}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                prop="saleTotalPrice"
                align='center'
                show-overflow-tooltip
                label="卖货变现">
                </el-table-column>
                <el-table-column
                prop="blindTotalPrice"
                align='center'
                show-overflow-tooltip
                label="盲盒变现">
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    layout="prev, pager, next"
                    :page-size='pageSize'
                    @current-change="changePageNum"
                    :total="totalNum">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: "TotalOrder",
    components: {
    },
    data() {
        return {
            showType: 1,
            showCenterType: 1, // 本月卖货变现最右边的增加还是减少，1为增加，2为减少
            tableList: [
                {
                    projectName: '项目名称',
                    totalPrice: '100W',
                    time: '2023年10月17日',
                    saleTotalPrice: '100W',
                    blindTotalPrice: '100W',
                },
                {
                    projectName: '项目名称',
                    totalPrice: '100W',
                    time: '2023年10月17日',
                    saleTotalPrice: '100W',
                    blindTotalPrice: '100W',
                },
                {
                    projectName: '项目名称',
                    totalPrice: '100W',
                    time: '2023年10月17日',
                    saleTotalPrice: '100W',
                    blindTotalPrice: '100W',
                },
            ],
            showTableList: [],
            pageNum: 1,
            pageSize: 10,
            totalNum: 10,
        };
    },
    created() {
        var list = []
        for(var i=0;i<11;i++){
            this.tableList.forEach(item => {
                list.push(item)
            })
        }
        this.tableList = list
        this.totalNum = list.length
        this.getList()
    },
    methods: {
        getList(){
            this.showTableList = this.tableList.slice((this.pageNum-1)*this.pageSize, (this.pageNum)*this.pageSize)
        },
        changePageNum(e){
            this.pageNum = e
            this.getList()
        },
    }
};
</script>
<style scoped>
.el-table__header-wrapper{
    line-height: 60px;
}
.el-table th.el-table__cell.is-leaf{
    background-color: #D4E2FC;
    color: #585859;
    font-size: 20px;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
    background-color: #F8FAFF !important;
}
.el-table td.el-table__cell div{
    font-size: 20px;
}
</style>
<style scoped>
.title{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.title_all{
    background-color: white;
    width: 31%;
    border-radius: 15px;
    box-shadow: 3px 3px #F0EFF5;
}
.title_left{
    text-align: left;
}
.title_center{
    text-align: center;
}
.title_right{
    text-align: right;
    margin-right: 20px;
}
.title_content{
    padding: 20px;
    font-size: 20px;
    color: gray;
    text-align: left;
}
.second_title{
    background-color: #F0EFF5;
    padding: 5px 15px;
    color: #A2A1A7;
    display: flex;
    width: 80%;
    margin: 10px 0;
    border-radius: 5px;
    min-height: 35px;
}
.second_title div{
    color: #FE5D24;
}
.second_title_disable{
    background-color: unset;
}
.third_title{
    color: #343336;
    display: flex;
    justify-content: space-between;
}
.third_title img{
    width: 50px;
    height: 50px;
}
.third_title .text{
    font-size: 40px;
    font-weight: bolder;
    line-height: 70px;
}
.center{
    padding-top: 30px;
    width: 100%;
    display: flex;
    height: 200px;
}
.center_left{
    width: 40%;
    background-color: #253B8A;
    box-shadow: 3px 3px #F0EFF5;
    border-radius: 10px;
}
.center_left_top{
    margin: 20px;
}
.center_left_top div{
    color: #F5F5F8;
    padding-left: 10px;
    font-size: 20px;
}
.center_left_down{
    background-color: #FFFFFF;
    height: 70%;
    border-radius: 11px;
    display: flex;
    width: 100%;
    padding-top: 20px;
    box-shadow: 3px 3px #F0EFF5;
}
.center_left_down_left{
    width: 40%;
    text-align: center;
    align-items: center;
}
.center_left_down_right{
    width: 50%;
    text-align: center;
    align-items: center;
}
.center_left_down_text{
    display: inline-block;
}
.center_left_down_text_title{
    border-left: 5px solid #FF4E00;
    color: #707070;
    font-size: 20px;
    font-weight: bolder;
}
.center_left_down_text_title div{
    padding-left: 5px;
}
.center_left_down_text_content{
    margin: 15px 0;
    font-size: 30px;
    font-weight: bolder;
    color: #343336;
}
.center_right{
    width: 58%;
    padding-left: 40px;
}
.center_right_top{
    background-color: #253B8A;
    box-shadow: 3px 3px #F0EFF5;
    border-radius: 10px;
    height: 49%;
    display: flex;
}
.center_right_top_left{
    width: 35%;
    text-align: center;
    align-items: center;
    color: #EAEBF2;
}
.center_right_top_left div{
    margin: 30px auto;
    font-size: 20px;
}
.center_right_top_right{
    background-color: #FFFFFF;
    width: 65%;
    border-radius: 9px;
    display: flex;
}
.center_right_top_right_left{
    margin: 20px auto;
    font-size: 40px;
    font-weight: bold;
    position: relative;
    margin-right: 0;
}
.center_right_top_right_price{
    position: absolute;
    right: 0;
}
.center_right_top_right_right{
    margin: 30px auto;
    margin-left: 5px;
    position: relative;
}
.center_right_top_right_right_1{
    position: absolute;
    color: #A2A1A7;
    bottom: -5px;
    font-size: 20px;
    font-weight: bold;
}
.center_right_top_right_right_2{
    position: absolute;
    padding-left: 70px;
    top: -20px;
}
.center_right_top_right_right_2_top{
    background-color: #F0EFF5;
    color: #A8A7AD;
    padding: 5px 10px;
    width: 70px;
    border-radius: 10px;
    text-align: center;
    margin: 5px auto;
}
.center_right_top_right_right_2_bottom{
    font-size: 17px;
}
.center_right_top_right_right_2_bottom_add{
    color: #FF4E00;
}
.center_right_top_right_right_2_bottom_del{
    color: #0AE69B;
}
.center_right_down{
    margin-top: 3%;
    background-color: #253B8A;
    box-shadow: 3px 3px #F0EFF5;
    border-radius: 10px;
    height: 49%;
    display: flex;
}
.bottom{
    margin-top: 50px;
    width: 98%;
    border-radius: 10px;
    box-shadow: 3px 3px #F0EFF5;
}
.total_price{
    font-weight: bolder;
}
.table_time{
    border: 1px solid #585859;
    padding: 5px 7px;
    font-size: 15px;
    border-radius: 20px;
}
</style>
